<template>
  <view class="tab-bar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index"
      class="tab-item"
      @click="switchTab(item.pagePath)"
    >
      <image 
        :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath"
        mode="aspectFit"
        class="tab-icon"
      />
      <text 
        :class="['tab-text', currentPath === item.pagePath ? 'active' : '']"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPath: '/pages/index/index',
      tabList: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png'
        },
        // ... 其他 tab 配置
      ]
    }
  },
  methods: {
    switchTab(path) {
      if (this.currentPath === path) return
      uni.switchTab({
        url: path
      })
      this.currentPath = path
    }
  },
  onShow() {
    const pages = getCurrentPages()
    const page = pages[pages.length - 1]
    this.currentPath = '/' + page.route
  }
}
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-icon {
  width: 24px;
  height: 24px;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.tab-text.active {
  color: #007AFF;
}
</style> 